
import { Layout } from 'antd';
import style from './index.module.css'
import { homeRoutes } from '../../routes/account'
import { Outlet } from "react-router-dom";
import RouteNavLink from '../../components/routeNavLink';



const { Sider, Content } = Layout;

const Home: React.FC = () => {


    return (
        <Layout className={style.home}>
            <Sider className={style.home_side}>
                {
                    homeRoutes.map(route => {
                        return (
                            <RouteNavLink 
                                fullpath={route.fullpath}
                                key={route.path} 
                                className={ ({isActive}) => isActive ? `${style.home_side_link} ${style.active}` : style.home_side_link } 
                                to={route.path}
                            >
                                {route.name}
                            </RouteNavLink>
                        )
                    })
                }
            </Sider>
            <Content className={style.home_content}>
                <Outlet />
            </Content>
        </Layout>
    )
}

export default Home;

